<template>
	<div class="forum">
		<div class="board-list">
			<!--左侧板块列表，主要是锚点链接-->
			<BoardList/>
		</div>
		<div class="content">
			<el-row :gutter="24">
				<el-col :span="18">
					<!--主题内容部分上方排行榜-->
					<HotRankingCard/>
				</el-col>
				<el-col :span="6">
					<!--个人信息卡片，包含发帖按钮-->
					<UserInfoCard/>
					<el-card style="margin-top: 8px;">
						<div class="search">
							<el-input placeholder="搜索主题..." style="margin-right: 8px;" v-model="keyword"/>
							<el-button type="primary" icon="search" @click="tosearch"></el-button>
						</div>
					</el-card>

				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :span="18">
					<!--主题内容部分板块(包含该板块下的主题链接)-->
					<MainBoards/>
				</el-col>
			</el-row>
		</div>

		<el-backtop :right="100" :bottom="100" />
	</div>
</template>
<script setup lang="ts">
import UserInfoCard from './component/UserInfoCard.vue'
import HotRankingCard from "./component/HotRankingCard.vue";
import BoardList from "./component/BoardList.vue";
import MainBoards from "./component/MainBoards.vue";
import {ref} from 'vue'
import {useRouter} from 'vue-router'
const router = useRouter()
//跳转去搜索页
const keyword = ref('')
const tosearch = ()=> {
	window.localStorage.setItem('search_temp_params', JSON.stringify({
		keyword: keyword.value,
	}))
	router.push({
		path: '/forumSearch'
	})
}

</script>
<style scoped lang="scss">
.forum{
	width: 70%;
	margin: 0 auto;
	display: flex;
	min-height: calc(100vh - 60px);
	padding-top: 14px;
	.board-list{
		width: 200px;
		position: sticky;
		top: 0;
		margin-right: 14px;

	}

	.content{
		flex: 1;
		padding-bottom: 30px;
	}
}

.search{
	width: 100%;
	display: flex;
	align-items: center;
}
</style>
